<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			#demo {
	            display: block;
	            width: 375px;
	            height: 450px;
	            margin: 50px;
	            position: relative;
	            border: 1px solid #ccc;
        	}
			 .icons{
				margin: 15px 0 0 0;
			}
			 .icons #u{
				list-style: none;
			}
			 .icons #u li{
				float: left;
				margin: 0 10px;
				
			}
			 .icons #u li img{
				border:  2px solid #fff;
			}
			 .icons #u li img.icon1{
				border: 2px solid #FFFFFF;
			}
			 .icons #u li img.icon2{
				border:  2px solid #ab5352;
			}
			
		#small-box {
            position: relative;
            z-index: 1;
        }

        #float-box {
            display: none;
            width: 175px;
            height: 175px;
            position: absolute;
            background: #ffffcc;
            border: 1px solid #ccc;
            filter: alpha(opacity=50);
            opacity: 0.5;
        }


        #big-box {
            /*display: none;*/
            position: absolute;
            top: 0;
            left: 400px;
            width: 400px;
            height: 400px;
            overflow: hidden;
            border: 1px solid #ccc;
            z-index: 1;;
        }

        #big-box img {
            position: absolute;
            z-index: 5
        }
		</style>
		<script type="text/javascript" src="js/biglook.js" ></script>
	</head>
	<body>
	<div id="demo">
			<div id="small-box">
        		<div id="float-box"></div>
        		<img src="img/lenovel/2_middle.jpg"  id="iconMiddle"/>
    		</div>
			<div class="icons">
				<ul id="u">
					<li><img src="img/lenovel/1.jpg" alt="1" name="icon" /></li>
					<li><img src="img/lenovel/2.jpg" alt="2" name="icon"/></li>
				</ul>
			</div>
		<div id="big-box">
        	<img src="img/lenovel/2_bigger.jpg"/ id="iconbig">
    	</div>
    </div>
	</body>
</html>

